<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点餐系统-用户登录</title>

    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="">
<div class="login">
    <h2>用户登录</h2>
    <div class="login_box">
        <!-- required就是不能为空 必须在css效果中有很大的作用 -->
        <!-- 可以简写为required -->
        <input type="text" v-model="username" required name="username" autocomplete="off" /><label>用户名</label>
    </div>
    <div class="login_box">
        <input type="password" v-model="password" required="required" name="password" /><label>密码</label>
    </div>
    <div class="login_box" id="rem_div">
        <label id="rem_label">记住用户名和密码<input type="checkbox" name="rem" id="rem"></label><br>
    </div>
    <button id="but" type="button" @click="login()">
        登录
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </button>
</div></form>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let vm = new Vue({
        el:"form",
        data:{
            username:"",
            password:""
        },
        methods:{
            login:function () {
                let data = new FormData(document.querySelector("form"));
                axios.post("/login",data).then(function (response) {
                    if (response.data == 0) {
                        alert("登录成功")
                            location.href="/index.html";
                    }else if (response.data==2){
                        alert("用户不存在!");
                    }else if (response.data==1){
                        location.href="/index.html";
                    }else{
                        alert("密码错误!");
                    }
                })
            }
        }
    })
    // 取出cookie里面保存的用户名和密码
    let cookies = document.cookie.split(";")
    console.log(cookies);
    for (let cookie of cookies) {
        console.log(cookie)
        let arr = cookie.split("=");
        let name = arr[0]
        let value = arr[1]
        if (name.trim()=="username"){
            vm.username = value;
        }
        if (name.trim()=="password"){
            vm.password = value;
        }

    }
</script>
</html>